<!DOCTYPE html>
<html>
<body style="zoom: 1.5">
  <p>An all green square should appear below</p>
  <canvas id="A" width=300 height=300></canvas>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner)
        testRunner.waitUntilDone();
    var context;

    window.onload = function() {
      context = document.getElementById("A").getContext("2d");
      context.fillStyle = 'red';
      context.fillRect(1, 1, 298, 298);
      requestAnimationFrame(doUpdate1);
    }

    function doUpdate1() {
      context.fillStyle = 'red';
      context.fillRect(1, 1, 298, 298);
      // We need to chain 2 rAFs because the first rAF may be called
      // before the initial presentation.
      requestAnimationFrame(doUpdate2);
    }

    function doUpdate2() {
      context.fillStyle = 'green';
      context.fillRect(1, 1, 298, 298);
      testRunner.notifyDone();
    }
    
  </script>
</body>
</html>
